<script>
import { ref } from 'vue';
import {ElMessage} from "element-plus";
import cardDemo from "/src/components/cardDemo.vue"
import img1 from "/src/assets/avatar.jpg"
import icon from "/src/assets/icon.png"
import axios from 'axios';
export default {
    name:'MainPage',
    components:{cardDemo},
    // 渲染
    mounted(){
      const userData = JSON.parse(sessionStorage.getItem('token'));
      this.token = userData.token;
      this.userID = userData.userID;
      console.log(this.token);
      axios.defaults.headers.common['Authorization'] = `${this.token}`;
      // 获取推荐文章列表
      const response = axios.get('http://localhost:8080/passageList/square',{});
      response.then((result) => {
        console.log(result);
        this.passageList = result.data.PassageList;
        console.log(this.passageList);
      }).catch((error) => {
        console.log(error);
      });
      const response_1 = axios.get('http://localhost:8080/users/'+this.userID);
      response_1.then((result) => {
          this.avatar = result.data.ProfilePhoto;
      }).catch((error) => {
          console.log(error);
      });
    },
    data(){
        return {
            img1,icon,
            token:ref(''),
            userID:ref(0),
            passageList:ref([]),
            avatar:ref(''),
            input:ref(''), //搜索框内容
            hasNewMessages: false
        }
    },
    methods:{
        // 头像点击
        avaClick(){
            this.$router.push({path:'/UserPage',query:{id:this.userID}});
        },
        // 搜索点击
        searchClick(){
            if(this.input === ''){
              ElMessage({
                message: '请输入搜索关键字',
                type: 'error',
                style: 'font-size:25px;font-weight:bold;',
                center: true,
                offset: 55,
                duration:1200
              })
            }
            else{
              this.$router.push({path:'/SearchPage/general',query:{id:this.input}})
            }

        },
        adoptClick(){
            this.$router.push({path:'/AdoptPage'})
        },
        msgClick(){
            this.$router.push({path:'/Message/like'})
        },
        postClick(){
            this.$router.push({path:'/PostPage'})
        },
        recommendClick(){
          const response = axios.get('http://localhost:8080/passageList/square',{});
          response.then((result) => {
            // 这里的result就是Promise被解决后的返回值，也就是[[PromiseResult]]对应的值
            console.log(result);
            this.passageList = result.data.PassageList;
            console.log(this.passageList);
          }).catch((error) => {
            console.log(error);
          });
        },
        followClick(){
          const response = axios.get('http://localhost:8080/passageList/focus',{});
          response.then((result) => {
            // 这里的result就是Promise被解决后的返回值，也就是[[PromiseResult]]对应的值
            console.log(result);
            this.passageList = result.data.PassageList;
            console.log(this.passageList);
          }).catch((error) => {
            console.log(error);
          });
        }

    }
}
</script>

<template>
    <div class="layout" style="height:100vh;">
        <el-container >
            <el-header class="header" >
                <el-row
                        justify="space-between"
                        style="padding-top: 10px;padding-bottom: 10px">

                    <!--头像-->
                    <img :src="icon"
                         style="width:55px;height:55px;"
                         alt=""/>

                    <div class="InputContainer">
                        <input @keyup.enter="searchClick" v-model="input" type="text" name="text" class="input" id="input" placeholder="发现更多……" autocomplete="off">
                        <button class="searchBut" @click="searchClick"><svg viewBox="0 0 530 530" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
                        </button>
                    </div>


                    <el-avatar
                            :class="'avatar'"
                            :src="this.avatar"
                            :fit="'cover'"
                            :shape="'circle'"
                            :size="55"
                            @click="avaClick"
                    />
                </el-row>
            </el-header>

            <el-container>
                <el-aside>
                    <el-menu
                            active-text-color="#FFD466"
                            default-active="1"
                    >
                        <el-menu-item class="aside" index="1">
                            <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
                            <span>发现</span>
                        </el-menu-item>
                        <el-menu-item class="aside" index="2" @click="adoptClick">
                            <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
                            <span>领养</span>
                        </el-menu-item>

                        <el-menu-item class="aside" index="3" @click="msgClick">
                            <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
                                <span>消息</span>
                        </el-menu-item>
                        
                        <el-menu-item class="aside" index="4" @click="postClick">
                            <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
                            <span>发布</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>


                <el-container>
                    <el-header style="height:40px;">
                      <el-menu
                          default-active="1"
                          style="display: flex;justify-content: center;height:40px;"
                          active-text-color="#FFD466"
                          mode="horizontal"
                      >
                        <el-menu-item class="chose" index="1" style="margin-right:15px" @click="recommendClick">推荐</el-menu-item>
                        <el-menu-item class="chose" index="2" @click="followClick">关注</el-menu-item>
                      </el-menu>
                    </el-header>

                    <el-main  class="mainPage">
                        <el-row style="justify-content:start;margin-left:45px;gap:15px;">
                            <cardDemo
                                v-for="passage in passageList"
                                :key="passage.PassageID"
                                :passage="passage"
                                :token="this.token"
                                :deleteAble="false"
                            />
                        </el-row>

                    </el-main>
                </el-container>
            </el-container>


        </el-container>
    </div>
</template>


<style scoped>
.avatar{
    cursor: pointer;
}
.el-menu{
    border:0!important;
}
/*header样式*/
.header{
    /*background-color:black;*/
    height:60px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    margin-bottom:20px;
}

/*搜索框样式*/
.InputContainer {
    height: 40px;
    margin-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    padding-left: 15px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}
.input {
    width: 200px;
    height: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    caret-color: black;
}
.searchIcon {
    margin-top:3px;
    width: 12px;
}
.searchBut {
    padding: 0 15px 0 12px;
    border: none;
    background-color: transparent;
    height: 40px;
    cursor: pointer;
    transition-duration: .3s;
}
.searchBut:hover {
    background-color: #FFE9B2;
    transition-duration: .3s;
}

/*aside*/
.el-aside{
    margin-left: 10px;
    width:180px;
    height:calc(100vh - 70px);
    padding-top:23vh;
}

.aside{
    height:65px;
    font-size:18px;
    font-weight:bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep(.aside:hover){
    background-color: #FFE9B2;
}

/*menuItem样式*/
.chose{
  font-size:18px;
  font-weight:bold;
}
>>> .chose:hover{
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}

/*主页面*/
.mainPage{
    height:50vh;
}

</style>


